<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <div style='width:600px;height:400px'></div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/echarts/4.8.0/echarts.min.js'></script>
  <script>
    (async function () {
      var mycharts = echarts.init(document.querySelector('div'))
      let res = await fetch('./json/china.json').then(res => res.json())
      let quality = await fetch('./json/quality.json').then(res => res.json())
      echarts.registerMap('chinaMap', res)
      var option = {
        geo: {
          type: 'map',
          map: 'chinaMap',
          label: {
            show: true
          }
        },
        series: [
          {
            data: quality,
            geoIndex: 0,//将空气质量的数据和第0个geo关联在一起
            type: 'map',
          }
        ],
        visualMap: {
          min: 0,
          max: 300,
          inRange: {
            color: ['white', 'red'],
          },
          calculable: true
        }
      }
      mycharts.setOption(option)
    })()
  </script>
</body>
<!-- https://www.bilibili.com/video/BV1bh41197p8?p=24 -->

</html>